<template>
  <div class="main">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="22" class="article-title">
            遇到的问题
          </el-col>
         
            
        </el-row>
        
      </div>
      <div class="tl">
        <div>重新渲染组件的三种方式</div>
        <div v-for="(item,index) in content" :key="index">
          <div>{{index+1}},{{item.title}}</div>
          <div>{{item.txt}}</div>
       </div>
      </div>
      
  </div>
</template>

<script>

export default {
  name: 'hzjmain',
  props: {
    msg: String
  },
  
  data() {
    return {
      content:[]
     
    }
  },
  created(){
    this.getContent()
  },
  methods:{
      getContent(){
        this.content=[
          {
            title:'v-if + nextTick',
            txt:'通过在nextTick方法里面修改v-if的值来实现绑定元素的销毁和重新渲染'
          },
          {
            title:'最佳方法：修改绑定的key值',
            txt:'通过监测key值的变化触发update钩子，通过differ算法实现元素的重新渲染'
          },
          {
            title:'内置forceUpdate方法',
            txt:'通过原生的强制刷新方法，重新渲染整个页面'
          },
        ]
      }

  }
}
</script>

